<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			img{
				vertical-align: top;
			}
				
				.slider{
					width: 310px;
					height: 260px;
					
					position: relative;
					margin: 100px auto;
					/*background-color: red;*/
					overflow: hidden;
				}
				.slider-scroll{
				    width: 310px;
				    height: 220px;
				    position: relative;
				    /*background-color: green;*/
				}
				.slider-main{
				    width: 620px;
				    height: 220px;
				    background-color: red;
					display: block;
				}
				.slider-main-img{
				    width: 310px;
				    height: 220px;
				    position: absolute;
				}
				.slider-main-img img{
				    width: 100%;
				    height: 100%;
				}
				.slider-ctl{
				    cursor: pointer;
				    text-align: center;
				}
				
				.slider-ctl-prev, .slider-ctl-next{
				    background: url("../img/icon.png");
				    width: 20px;
				    height: 34px;
				    position: absolute;
				    top: 50%;
				    margin-top: -35px;
				}
				
				.slider-ctl-prev{
				    left: 5px;
				}
				
				.slider-ctl-next{
				    background-position: -9px -45px;
				    right: 5px;
				}
				
				.slider-ctl-icon{
				    width: 24px;
				    height: 5px;
				    background: url("../img/icon.png") no-repeat -24px -790px;
				    display: inline-block;
				    margin: 5px;
				
				    text-indent: 20em;
				}
				
				.current{
				    background-position: 0 -770px;
				}
				
		</style>
	</head>
	<body>
		<div id="slider" class="slider">
		    <div id="slider_scroll" class="slider-scroll">
		        <div class="slider-main" id="slider_main">
		            <div class="slider-main-img">
		                <a href="">
		                    <img src="../img/1.jpeg" alt="">
		                </a>
		            </div>
		            <div class="slider-main-img">
		                <a href="">
		                    <img src="../img/2.jpeg" alt="">
		                </a>
		            </div>
		            <div class="slider-main-img">
		                <a href="">
		                    <img src="../img/3.jpeg" alt="">
		                </a>
		            </div>
		            <div class="slider-main-img">
		                <a href="">
		                    <img src="../img/4.jpeg" alt="">
		                </a>
		            </div>
		            <div class="slider-main-img">
		                <a href="">
		                    <img src="../img/5.jpeg" alt="">
		                </a>
		            </div>
		            <div class="slider-main-img">
		                <a href="">
		                    <img src="../img/6.jpeg" alt="">
		                </a>
		            </div>
		        </div>
		    </div>
		    <div class="slider-ctl" id="slider_ctl">
		        <span class="slider-ctl-prev"></span>
		        <span class="slider-ctl-next"></span>
		    </div>
		</div>
		<script src="../../通用兼容文件.js"></script>
		<script>
			window.onload = function () {
    // 1. 获取需要的标签
    var slider = $("slider");
    var slider_main = $("slider_main");
    var slider_main_img = slider_main.children;
    var slider_ctl = slider.children[1];

    var iNow = 0;

    // 2. 动态创建指示器
    for(var i=0; i<slider_main_img.length; i++){
        var span = document.createElement("span");
        span.className = "slider-ctl-icon";
        span.innerText = slider_main_img.length - i - 1;
        slider_ctl.insertBefore(span, slider_ctl.children[1]);
    }

    // 3. 让第一个选中
    slider_ctl.children[1].className = "slider-ctl-icon current";

    // 4. 让滚动的内容归位
    var scroll_w = slider.offsetWidth;
    for(var j=1; j<slider_main_img.length; j++){
        slider_main_img[j].style.left = scroll_w + "px";
    }

    // 5. 遍历监听操作
    var slider_ctl_child = slider_ctl.children;
    for(var i=0; i<slider_ctl_child.length; i++){
        // 5.1 监听点击
        slider_ctl_child[i].onmousedown = function () {
            // 5.2 判断
            if(this.className === "slider-ctl-prev"){ // 左边
                /*
                 1.当前可视区域的图片快速右移;
                 2.上一张图片快速出现在可视区域的左边
                 3.让这张图片做动画进入
                */
                buffer(slider_main_img[iNow], {"left": scroll_w});
                iNow--;
                // 判断
                if(iNow < 0){
                    iNow = slider_main_img.length - 1;
                }
                slider_main_img[iNow].style.left = -scroll_w + 'px';
                buffer(slider_main_img[iNow], {"left": 0});

            }else if(this.className === "slider-ctl-next"){ // 右边
                autoPlay();
            }else { // 下边
                /*
                 1.用当前点击的索引和选中索引对比
                 2.点击的 > 选中的, 相当于点击了右边的按钮
                 2.点击的 < 选中的, 相当于点击了左边的按钮
                */

                // 获取索引
                var index = parseInt(this.innerText);
                // 对比
                if(index > iNow){
                    buffer(slider_main_img[iNow], {"left": -scroll_w});
                    slider_main_img[index].style.left = scroll_w + 'px';
                }else if(index < iNow){
                    buffer(slider_main_img[iNow], {"left": scroll_w});
                    slider_main_img[index].style.left = -scroll_w + 'px';
                }
                iNow = index;
                buffer(slider_main_img[iNow], {"left": 0});

            }

            changeIndex();
        }
    }

    // 6. 切换索引
    function changeIndex() {
        for(var i=1; i<slider_ctl_child.length-1; i++){
            slider_ctl_child[i].className = "slider-ctl-icon";
        }

        slider_ctl_child[iNow+1].className = "slider-ctl-icon current";
    }

    // 7. 自动播放
    var timer = setInterval(autoPlay, 1000);
    function autoPlay() {
        /*
         1.当前可视区域的图片快速左移;
         2.下一张图片快速出现在可视区域的右边
         3.让这张图片做动画进入
         */
        buffer(slider_main_img[iNow], {"left": -scroll_w});
        iNow++;
        // 判断
        if(iNow >= slider_main_img.length){
            iNow = 0;
        }
        slider_main_img[iNow].style.left = scroll_w + 'px';
        buffer(slider_main_img[iNow], {"left": 0});

        changeIndex()
    }

    // 8. 设置和清除定时器
    slider.onmouseover = function () {
        clearInterval(timer);
    };

    slider.onmouseout = function () {
        timer = setInterval(autoPlay, 1000);
    }
};
		</script>
	</body>
</html>
